<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>double-slider</title>
    <link rel="stylesheet" media="(min-width: 870px)" href="./style.css">
    <link rel="stylesheet" media="(max-width: 869px)" href="./style-mobile.css">
</head>

<body>
    <div class="slide-container">
        <div class="left-slide">
            <div class="left-slide-item">
                <h1>美女1</h1>
                <p>这是一个美女</p>
            </div>
            <div class="left-slide-item">
                <h1>美女2</h1>
                <p>这是一个大美女</p>
            </div>
            <div class="left-slide-item">
                <h1>美女3</h1>
                <p>这是一个超级大美女</p>
            </div>
            <div class="left-slide-item">
                <h1>美女4</h1>
                <p>这是一个超级超级大美女</p>
            </div>
        </div>
        <div class="right-slide">
            <div class="right-slide-item"></div>
            <div class="right-slide-item"></div>
            <div class="right-slide-item"></div>
            <div class="right-slide-item"></div>
        </div>
        <div class="action-button">
            <button type="button" class="arrow-down-btn btn">
                <svg t="1626355990435" class="arrow-icon arrow-down-icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2560">
                    <path
                        d="M555.989333 171.221333v573.696c0 0.085333 0.213333 0.170667 0.213334 0.085334l208-216.405334a43.946667 43.946667 0 1 1 63.402666 61.013334l-283.093333 294.570666a44.032 44.032 0 0 1-63.402667 0L196.266667 587.989333a43.818667 43.818667 0 0 1 1.194666-62.208 44.032 44.032 0 0 1 62.208 1.237334l208 216.362666c0.085333 0.128 0.170667 0 0.170667-0.085333V170.24c0-23.381333 18.346667-42.496 41.301333-43.904 25.6-1.493333 46.805333 19.413333 46.805334 44.885333z"
                        fill="#535455" p-id="2561"></path>
                </svg>
            </button>
            <button class="btn arrow-up-btn" type="button">
                <svg t="1626356013541" class="arrow-icon arrow-up-icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2709">
                    <path
                        d="M468.010667 852.821333V279.04c0-0.085333-0.213333-0.170667-0.213334-0.085333L259.84 495.402667a43.946667 43.946667 0 1 1-63.402667-61.013334l283.221334-294.698666a44.032 44.032 0 0 1 63.402666 0l284.672 296.32a43.818667 43.818667 0 0 1-1.194666 62.208 44.032 44.032 0 0 1-62.208-1.237334l-208-216.362666c-0.085333-0.128-0.170667 0-0.170667 0.085333V853.76c0 23.381333-18.346667 42.496-41.301333 43.904a44.672 44.672 0 0 1-46.805334-44.885333z"
                        fill="#535455" p-id="2710"></path>
                </svg>
            </button>
        </div>
    </div>
</body>
<script src="./script.js"></script>

</html>